<template>
	<view>
		<view class="head" >
			<view class="status" @click="navBack()"><i class="hxicon-back"></i>{{typeTit}}</view>
			<view class="search" @click="goSearch">
				<i class="hxicon-search"></i>
				<text class="tit">搜索</text>
			</view>
		</view>
		<view class="tabs-box">
			<view class="hx-tabs">
				<view class="hx-tabs-item" v-for="(item,i) in tabs" :key="i" :class="{'hx-tabs-active': swiperCurrent == i}" @click="swiperChange(i)" :style="{transition: transtionTime + 'ms'}">
					<text>{{item.name}}</text>
				</view>
				<view class="hx-tabs-slider-box" :style="{width: (100/tabs.length) + '%',transition: transtionTime + 'ms',left:swiperCurrentSliderLeft + '%'}">
					<view class="hx-tabs-slider"></view>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef"  @init="mescrollInit" top="90" @down="downCallback" :up="upOption" @up="upCallback">
		<view class=" store-box" v-if="storeList">
			<view class=" item-box" v-for="(store,i) in storeList" :key="i">
				<view class="container top-box">
					<view class="left" @click="toStore(store.id)">
						<image :src="store.img_url" mode="aspectFill"></image>
					</view>
					<view class="right" @click="toStore(store.id)">
						
						<text class="tit" >{{store.md_name}}</text>
						<view class="row justify-content">
							<view class="row-left">
								<i class="hxicon-favorfill "></i>
								<text class="t1">{{store.md_pingfen}}</text>
								<text class="t2">月售{{store.md_sales}}</text>
							</view>
							<view class="row-right">
								<i class="hxicon-locationfill"></i>
								<text>{{store.dis}}</text>
							</view>
						</view>
						<view class="row">
							<text >起送￥{{store.md_qs_money}}</text>
							<text class="t2" v-if="store.md_ps_money > 0">配送￥{{store.md_ps_money}} </text>
							<text class="t2" v-else>免费配送</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		</mescroll-body>
		
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	var sysInfo = uni.getSystemInfoSync();
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	
	export default {
		mixins: [MescrollMixin], 
		data() {
			return {
				mainHeight: 0,
				statusBarHeight,
				tabs: [
					{name:'销量优先', data:[], api:'',load: false},
					{name:'距离优先', data:[], api:'', load: false},
					{name:'速度优先', data:[], api:'', load: false},
					{name:'费用最低', data:[], api:'', load: false},
				],
				swiperCurrent: 0,
				transtionTime:100,
				swiperCurrentSliderLeft: 0,
				typeTit:'', //分类
				storeList:[],
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '', // 提示
						btnText: ''
					}
				},
				sortOrderbby:'sales_d',
				category_id:'',
				
			}
		},
		onLoad(option) {
			this.mainHeight = sysInfo.screenHeight - statusBarHeight - 50 - 60 - 50 + 'px';
			this._freshing = false;
			if(option.type){
				this.typeTit = option.title;
				this.category_id = option.type;
			}
		},
		mounted() {
			
		},
		methods: {
			swiperChange(index) {
				this.swiperCurrent = index;
				this.swiperCurrentSliderLeft= (100/this.tabs.length) * index;
				let url = this.tabs[index].api;
				
				// index 0全部，1待支付，2待收货，3待评价，4退款
				// 假如滑动了tab则 去获取对应的数据
				if(this.tabs[index].data.length == 0){
					// 只获取一次数据
					if(index == 0){
						this.sortOrderbby = 'sales_d';
					}else if(index == 1){
						this.sortOrderbby = 'dis_d';
					}else if(index == 2){
						this.sortOrderbby = 'speed_d';
					}else if(index == 3){
						this.sortOrderbby = 'ps_d';
					}
					this.upCallback({num: 1, size: 10})
				}
			},
			//去订单详情
			goOrderInfo(orderId){
				uni.redirectTo({
				    url: '/pages/map/location?id=' + orderId
				});
			},
			//搜索
			goSearch(){
				uni.navigateTo({
					url: '/pages/search/search?type=order'
				})
			},
			navBack(){
				if(getCurrentPages().length>1){
					uni.navigateBack();
				}else{
					// #ifdef H5
					history.back()
					// #endif
					// #ifndef H5
					uni.reLaunch({
						url: '/pages/index/index'
					});
					// #endif
				}
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.endSuccess();
			},
			upCallback(page) {
				let reqInfo = {};
				reqInfo.loading=1;
				reqInfo.page = page.num;
				reqInfo.pageSize = page.size;
				reqInfo.lng ='117.201137';
				reqInfo.lat ='39.084527';
				reqInfo.action = 'GetIndexInfo';
				reqInfo.orderby =this.sortOrderbby;
				reqInfo.category_id =this.category_id;
				this.$api.Default.getUserInfo(reqInfo,(res)=>{
					     for(let s of res.data.dplist){
							 if(s.img_url.indexOf('http') == -1){
								 s.img_url = this.$config.server+s.img_url;
							 }
							 s.dis = (s.dis/1000).toFixed(2)+'km';
						 }
						this.mescroll.endSuccess(res.data.dplist.length);
						if(page.num == 1) this.storeList = [];
					    this.storeList=this.storeList.concat(res.data.dplist);
				},err=>{
						this.mescroll.endErr();	
				});
			},
			toStore(id){
				uni.navigateTo({
					url: '../store/index?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
.head{
    background: linear-gradient(100deg, #FFEB3B, #FFC107);
	padding-bottom: 10px;
	padding-top: 10px;
	
	z-index: 9990;
	position: fixed;
	// top: --window-top; /* css变量 */
	width: 100%;

	.status{
		height: var(--status-bar-height);
		line-height: 35px;
		padding-left: 30upx;
		font-size: 18px;
	}
	.search{
		height: 35px;
		background-color: #fff;
		border-radius: 10px;
		margin: 0 20px 0 120px;
		display: flex;
		align-items: center;
		padding: 0 15px;
		font-size: 14px;
		color: #888;
		i{
			font-weight: bold;
			font-size: 16px;
		}
		.tit{
			margin-left: 6px;
		}
	}
}
.tabs-box{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: sticky;
	top: calc(44px + var(--status-bar-height));
	z-index: 10;
	background-color: white;
	height: 50px;
	padding-bottom: 10px;
	padding-top: 12px;
	
	.hx-tabs{
		position: relative;
		display: flex;
		height:100%;
		width: 100%;
		justify-content: space-evenly;
		&-item{
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 70px;
			color:#666666;
			text{
				font-size: 16px;
			}
			
		}
		&-active{
			color:#333333;
			font-weight: bold;
		}
		&-slider-box{
			position: absolute;
			display: flex;
			justify-content: center;
			bottom: 0;
			width: 20%;
		}
		&-slider{
			display: flex;
			background: #f6d200;
			width: 30px;
			height: 3px;
		}
	}
}
.main{
	position: relative;
	background-color: #ffffff;
	
}
.store-box{
	margin-top: 10px;
	.item-box{
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
		background-color: #ffffff;
		padding: 18px;
		.top-box{
			display: flex;
			flex-direction: row;
			.left{
				margin-right: 10px;
				
				
				image{
					width: 72px;
					height: 54px;
					border-radius: 6px;
				}
			}
			.right{
				flex: 1;
				.tit{
					font-size: 16px;
					font-weight: bold;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.justify-content{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
				.row{
					font-size: 12px;
					color: #999999;
					margin-top: 4px;
					.row-left{
						display: flex;
						flex-direction: row;
						.t1,i{
							color: #ffca3e;
						}
						
					}
					.t2{
						margin-left: 12px;
					}
					.row-right{
						display: flex;
						flex-direction: row;
						i{
							margin-right: 4px;
						}
					}
					
				}
			}
		}
		.bottom-box{
			&-container{
				margin: 12px 0 0;
				padding-left: 82px;
				
				white-space: nowrap;
				.goods-box{
					width: 80px;
					margin-left: 12px;
					display: inline-block;
					.img-box{
						position: relative;
						width: 80px;
						height: 60px;
						background-color: #f1f1f1;
						border-radius: 4px;
						image{
							width: 100%;
							height: 60px;
						}
						.tag{
							position: absolute;
							bottom: 0;
							left: 0;
							background-color: #FF5722;
							color: #ffffff;
							padding: 2px 4px;
							font-size: 12px;
							border-radius: 4px;
						}
					}
					.tit{
						font-size: 14px;
						margin-top: 4px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.price-box{
						margin-top: 4px;
						.txt1{
							font-size: 10px;
							color: #FF5722;
						}
						.txt2{
							font-size: 16px;
							color: #FF5722;
						}
						.txt3{
							margin-left: 6px;
							font-size: 10px;
							color: #bbbbbb;
							text-decoration: line-through;
						}
					}
				}
				.goods-box:last-child{
					margin-right: 12px;
				}
				
			}
			
		}
	}
	.item-box:last-child{
		border-bottom: 0;
	}
}
</style>
